<template>
	<view class="goods_class_main">
		<view class="return_title_search">
			<view class="return_view" @click="returnShopPage">
				<uni-icons type="arrow-left" size="26"></uni-icons>
			</view>
			<view class="class_text">
				全部分类
			</view>
			<view class="search_goods" @click="toShoppingSearchPage">
				<uni-icons type="search" size="26"></uni-icons>
			</view>
		</view>

		<view class="shpping_class_category">
			<!-- 左侧商品分类栏 -->
			<view class="left_category_tabbar">
				<view class="class_types_per" :class="{'selectedCategory' : activeTab === index}"
					v-for="(category,index) in categoryList" :key="index" @click="selectCategory(category,index)">
					{{category.categoryName.length > 4 ? category.categoryName.substring(0,4) + "..." : category.categoryName}}
				</view>
			</view>
			<!-- 右侧商品展示区 -->
			<view class="right_goods_main">
				<view class="category-good-item" v-for="item in goodsList" :key="item.categoryAid">
					<view class="category-title">
						{{item.categoryName}}
					</view>
					<view class="goods-show-main">
						<view class="goods-show" v-for="good in item.goodLists" :key="good.goodsAid" @click="toGoodDetailPage(good)">
							<view class="goods_per_view">
								<image :src="good.goodsImg" mode="aspectFill" class="good_image"></image>
							</view>
							<view class="good_name">
								{{good.goodsName}}
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		getGoodsCategoryList,
		getGoodByCategoryAid
	} from '@/request/goods';
	export default {
		data() {
			return {

				categorys: [{
					categoryId: 1,
					categoryName: '爆款推荐',
				}],

				goods: [{
					categoryId: 14,
					categoryName: '聚拢WG2系列',
					goodList: [{
						goodsId: 1,
						goodName: '折叠椅',
						goodImage: 'https://img0.baidu.com/it/u=1811445092,447918734&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500'
					}]
				}],

				goodsList: [],
				categoryList: [{
					categoryId: 1,
					categoryName: '爆款推荐',
					catagoryGoods: [{
							parentId: null,
							parentName: null,
							goodsId: 1,
							goodName: '折叠椅',
							goodImage: 'https://img0.baidu.com/it/u=1811445092,447918734&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500'
						},
						{
							parentId: null,
							parentName: null,
							goodsId: 2,
							goodName: '咖啡杯',
							goodImage: 'https://imgservice.suning.cn/uimg1/b2c/image/DIVdYYIZUdsjqEN_o-v4GA.jpg_800w_800h_4e'
						},
						{
							parentId: null,
							parentName: null,
							goodsId: 3,
							goodName: '山地车',
							goodImage: 'https://img2.baidu.com/it/u=628326649,3479161447&fm=253&fmt=auto&app=138&f=JPEG?w=1067&h=800'
						}
					]
				}, ],
				// 选中的导航栏索引
				activeTab: 0,
			}
		},
		onLoad() {
			// 发送请求获取商品分类数据
			this.getGoodsCategoryList();
			
			// 获取第一个分类的商品
			this.getGoodsFunc({aid: 1});
		},

		methods: {

			// 发送请求获取商品分类数据
			getGoodsCategoryList() {
				getGoodsCategoryList().then(res => {
					// console.log(res);
					this.categoryList = res.data.data
				}).catch(err => {
					console.log(err);
					uni.showToast({
						title: '商品找不到了,请稍后再试...'
					})
				})
			},

			// 返回商城页面
			returnShopPage() {
				uni.navigateBack();
			},

			// 点击左侧导航
			selectCategory(category, index) {
				this.activeTab = index;
				// 获取右侧的商品列表
				this.getGoodsFunc(category);
			},

			// 获取右侧的商品列表
			getGoodsFunc(category) {
				const param = {
					categoryAid: category.aid
				}
				getGoodByCategoryAid(param).then(res => {
					this.goodsList = res.data.data.filter(item => item.goodLists.length > 0);
				}).catch(err => {
					console.log(err);
					uni.showToast({
						title: '商品找不到了,请稍后再试...'
					})
				})
			},


			// 点击商品去商品详情页面
			toGoodDetailPage(item) {
				// console.log(item);
				uni.navigateTo({
					url: `./goodDetail?goodAid=${item.goodsAid}`
				})
			},

			// 点击搜索图标去商品搜索页面
			toShoppingSearchPage() {
				uni.navigateTo({
					url: '/pages/tabBar/extUI/shopping_topBar/shoppingSearchPage'
				})
			},

		}
	}
</script>

<style scoped>
	.goods_class_main {
		height: 100vh;
		overflow: hidden;
		padding-top: 30px;
	}

	.return_title_search {
		padding-left: 20px;
		padding-right: 20px;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}

	.class_text {
		font-size: 20px;
		letter-spacing: 2px;
	}

	.shpping_class_category {
		width: 100%;
		margin-top: 20px;
		display: flex;
		flex-direction: row;
		margin-right: 20px;
		overflow: hidden;
	}

	.left_category_tabbar {
		width: 25%;
		font-size: 18px;
		color: #6c6b71;
		overflow-y: auto;
		/* 当内容超出时允许垂直滚动 */
	}

	.class_types_per {
		padding-top: 15px;
		padding-bottom: 15px;
		text-align: center;
		font-size: 26rpx;
	}

	.right_goods_main {
		width: 74%;
		height: calc(100vh - 50px);
		overflow-y: auto;
		display: flex;
		flex-direction: row;
		justify-content: start;
		flex-wrap: wrap;
		align-content: flex-start;
		background-color: #ffffff;

	}

	.category-good-item {
		width: 90%;
		margin-top: 30rpx;
		margin-left: 30rpx;
		margin-bottom: 30rpx;
	}

	.category-title {
		font-size: 35rpx;
		margin-left: 30rpx;
	}

	.goods-show-main {
		width: ;
		display: flex;
		flex-wrap: wrap;
	}

	.goods-show {
		width: 160rpx;
		margin-top: 30rpx;
		margin-right: 50rpx;
		margin-left: 30rpx;
	}



	.goods_per {
		margin-left: 40px;
		margin-top: 30px;
		display: flex;
		align-items: center;
		flex-direction: column;
	}

	.good_image {
		width: 160rpx;
		height: 160rpx;
	}

	.good_name {
		font-size: 15px;
		margin-top: 10px;
		text-align: center;
	}

	.selectedCategory {
		background-color: #66596b;
		color: #fff;
	}
</style>